<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>选择车票</title>
</head>
<style>
	* {
		margin: 0;
		padding: 0;
	}

	.content {
		width: 100%;
		height: auto;
		overflow: hidden;
	}

	.header {
		background-color: #fff;
		position: relative;
		z-index: 2000;
	}

	.wrapper {
		width: 1200px;
		padding: 0 5px;
		margin: 0 auto;
	}

	.header-cont {
		height: 80px;
		box-sizing: border-box;
	}

	.logo {
		float: left;
		margin: 15px 0 0 0;
	}

	.logo img {
		width: 200px;
		height: 50px;
	}

	.header-right {
		float: right;
		margin: 24px 0 0 0;
		width: 940px;
		height: 40px;
		background: image-set(url("train.png") 1x, url("train@2x.png") 2x);
		background-repeat: no-repeat;
		position: relative;
		z-index: 2000;
	}

	.header-search {
		width: 380px;
		float: left;
		margin: 5px 0 5px 90px;
	}

	.header-menu {
		float: right;
		padding-right: 10px;
	}

	.search-bd {
		width: 350px;
		position: relative;
	}

	.search-input {
		width: 100%;
		float: left;
		height: 30px;
		line-height: 20px;
		border: 1px solid #dedede;
		padding: 4px 10px;
		background-color: #fff;
		color: #333;
		outline: none;
		font-size: 14px;
		box-sizing: border-box;
	}

	.search-btn {
		float: left;
		width: 30px;
		color: #FFFFFF;
		height: 30px;
		line-height: 30px;
		background-color: #5696DE;
		border: none;
		text-align: center;
		cursor: pointer;
		outline: none;
	}

	.search-btn img {
		width: 16px;
		height: 16px;
	}

	.header-menu li {
		float: left;
		margin-left: 10px;
		height: 40px;
		line-height: 40px;
		font-size: 12px;
		position: relative;
		list-style: none;
		color: #3b99fc;
		font-size: 12px;
	}

	.menu-line {
		color: #acd1f9;
	}

	.menu-login a {
		color: #333;
		text-decoration: none;
		background-color: transparent;
		margin-left: 10px;
	}

	.nav-box {
		height: 40px;
		background-color: #3b99fc;
	}

	.nav {
		width: 1190px;
		margin: 0 auto;
		height: 40px;
		position: relative;
		z-index: 1900;
	}

	.nav li {
		list-style: none;
		width: 145px;
		float: left;
		font-size: 14px;
		height: 40px;
		line-height: 40px;
		text-align: center;
		color: #fff;
	}

	.active {
		background-color: #2676e3;
		color: #fff;
	}

	.tablehead {
		height: 26px;
		width: 20px;
		background-color: #6899FF;
		color: white;
		text-align: center;
		padding: 10px;
		font-size: 20px;
		font-weight: 400;
	}

	.tablecontent {
		text-align: center;
	}
</style>

<body>
	<div class="content">
		<div class="header">
			<div class="wrapper">
				<div class="header-cont">
					<h1 class="logo">
						<img src="img/title.png" alt="">
					</h1>
					<div class="header-right">
						<div class="header-search">
							<div class="search-bd">
								<input type="text" class="search-input" placeholder="搜索车票、餐饮、常旅客、相关规定">
							</div>
							<a href="javascript:;" class="search-btn">
								<img src="img/search.png" alt="">
							</a>
						</div>
						<ul class="header-menu">
							<li>无障碍</li>
							<li class="menu-line">|</li>
							<li>爱心版</li>
							<li class="menu-line">|</li>
							<li>English</li>
							<li class="menu-line">|</li>
							<li>我的12306</li>
							<li class="menu-line">|</li>
							<li class="menu-login">
								<a href="javascript:;">用户：admin</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<div class="nav-box">
				<ul class="nav">
					<li>首页</li>
					<li class="active">车票</li>
					<li>团购服务</li>
					<li>会员服务</li>
					<li>站车服务</li>
					<li>商旅服务</li>
					<li>出现指南</li>
					<li>信息查询</li>
				</ul>
			</div>
		</div>
		<div class="container">

			<div id="needsbar"
				style="position: absolute;left: 3%;top:160px;border:3px solid #3b99fc;width: 90%;height: 80px;padding: 20px;font-size: 20px;">
				出发地：成都东&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;到达地：北京西<br><br>
				出发日期：2020-1-20
			</div>
			<table id="choices" style="position: absolute; left: 3%; top: 313px; width: 93%; height: 46px;" border="1">
				<tr id="tableheadtr" style="background-color: #3b99fc">
					<td height="40" class="tablehead">车次号</td>
					<td class="tablehead">出发时刻</td>
					<td class="tablehead">商务座余票</td>
					<td class="tablehead">一等座余票</td>
					<td class="tablehead">二等座余票</td>
				</tr>
				<tr>
					<td class="tablecontent">C2093</td>
					<td class="tablecontent">12:30:00</td>
					<td class="tablecontent">
						<a href="#">12</a>
					</td>
					<td class="tablecontent">
						<a href="#">20</a>
					</td>
					<td class="tablecontent">
						<a href="">21</a>
					</td>
				</tr>
			</table>
		</div>
	</div>

</body>

</html>